import { connect } from "react-redux"

import {createIncrementAction, createDecrementAction} from "../../redux/actions/count"

// UI组件
const CountUI = (props) => {
  // 接收 映射过来的值
  const {count, increment, decrement} = props

  return(
    <div>
      <h2>Count容器组件</h2>
      <h4>总数:{count}</h4>
      <button onClick={() =>increment(1) }>加一</button>
      <button onClick={() =>decrement(1) }>减一</button>
    </div>
  )
}

// 传递 state 到UI组件
const mapStateToProps = state =>({count: state.count})

// 传递 操作状态的方法
const mapDispatchToProps = dispatch => {
  return {
    increment: value => dispatch(createIncrementAction(value)),
    decrement: value => dispatch(createDecrementAction(value))
  }
}

// 导出容器组件
export default connect(mapStateToProps,mapDispatchToProps )(CountUI)


